<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TODOList</title>
    <style type="text/css">
        body {
            margin: 0;
            min-height: 600px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #ff5550;
            text-align: center;
            font-size: 45px;
        }
        #left{
            float: left;
            width: 500px;
            min-height: 600px;
            background-color: #f5f5f5;
        }
        #addInput {
            margin-left: 49px;
            width: 400px;
            height: 400px;
            box-sizing: border-box;
            line-height: 30px;
            border: 1px solid #000;
            border-radius: 3px;
            padding: 5px 15px;
            font-size: 18px;
            resize: none;
        }
        #left button{
            display: block;
            margin-left: 49px;
            width: 400px;
            font-size: 16px;
        }
        #right{
            left: 500px;
            float: left;
            width: calc(100% - 700px);
            min-height: 600px;
            height: 100%;
        }

        #right .single {
            position: relative;
            border: 1px solid #000;
            border-radius: 3px;
            background-color: rgb(241, 241, 192);
        }

        #right.single p {
            width: 100%;
            height: 30px;
            margin: 0;
            line-height: 30px;
            padding: 5px 15px;
        }

        #right .single span {
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="left">
        <h1>备忘录</h1>
        <textarea name="" id="addInput" cols="30" rows="10" onkeyup="_Keyup()" placeholder="中文有bug"></textarea>
        <button onclick="AddInput()">+</button>
    </div>
    <div id="right"></div>
</body>
</html>
<script type="text/javascript">

    var _Input = document.getElementById('addInput');
    var _List = document.getElementById('right');
    var all = document.getElementsByClassName('single');
    function AddInput() {
        let oDiv = document.createElement('div');
        let oSpan = document.createElement('span');
        let oP = document.createElement('p');
        oDiv.appendChild(oP);
        oDiv.appendChild(oSpan);
        oP.innerHTML = _Input.value;
        oSpan.innerHTML = '&times;';
        oDiv.className = 'single';
        _List.appendChild(oDiv);
        _Input.value = '';//清空输入框
        oSpan.onclick = function () {
            _List.removeChild(this.parentNode);//绑定删除方法
        };
    };
    //模糊查询
    function _Keyup(){
        let thisValue = _Input.value;
        let reg = new RegExp('(' + thisValue + ')','g')
        for (var i = 0; i < all.length; i++) {
            var one = all[i].getElementsByTagName('p')[0];
            var newStr = one.innerText.replace(reg, '<font color=red>$1</font>');
            if (reg.test(thisValue)) {
                one.innerHTML = newStr;//匹配到的变红
            } else {
                all[i].style.display = 'none';//匹配不到的隐藏
            }
        }
    }

</script>